<template>
  <div class="farmnei">
    <div class="top-img">
      <img v-if="neiType == 1" src="../assets/farm-nbc-nbi.png" alt="">
      <img v-if="neiType == 2" src="../assets/farm-nbi-trx.png" alt="">
      <img src="../assets/nbc-logo.png" alt="">
    </div>
    <div class="farm-text1">
      <span v-if="neiType == 1">NBC/TRX</span>
      <span v-if="neiType == 2">NBI/TRX</span>
       {{$t('user.planet')}}</div>
    <div class="farm-text2">
      <img src="../assets/farm-icon-timered.png" alt="">
      <span>{{$t('user.COMINGSOON2')}}</span>
    </div>
    <div class="farmnei-flex">
      <div class="flex-box">
        <img v-if="neiType == 1" class="img1" src="../assets/farm-nbc-nbi.png" alt="">
        <img v-if="neiType == 2" class="img1" src="../assets/farm-nbi-trx.png" alt="">
        <div class="farmnei-text1">0</div>
        <div class="farmnei-text2">{{$t('user.ExpectedNBI')}}</div>
        <div class="farmnei-btn disabledSty">{{$t('user.harvest')}}</div>
      </div>
      <div class="flex-box">
        <img class="img1" src="../assets/nbc-logo.png" alt="">
        <div class="farmnei-text1">0</div>
        <div class="farmnei-text2">{{$t('user.StakedNBC')}}
          <span v-if="neiType == 1">NBC/TRX</span>
          <span v-if="neiType == 2">NBI/TRX</span>
          LP</div>
        <div class="farmnei-input1">
          <input type="text" v-model="zhiNum">
          <div class="disabledSty">{{$t('user.StakeNBC')}}</div>
        </div>
        <!-- <div class="farmnei-text3">
          <span>{{$t('user.GettheLP')}}</span>
          <img src="../assets/farm-icon-more.png" alt="">
        </div> -->
      </div>
      <div class="flex-box">
        <div class="right-img">
          <img src="../assets/farm-icon-remove.png" alt="">
          <div style="color: #535353;">{{$t('user.Decelerate')}}</div>
        </div>
        <img class="img1" src="../assets/farm-icon-rocket.png" alt="">
        <div class="farmnei-text1">0</div>
        <div class="farmnei-text2">
          {{$t('user.accelerated')}}
          <span>NBC</span>
        </div>
        <div class="farmnei-input1">
          <input type="text" v-model="zhiNum">          
          <span>NBC</span>
          <div class="disabledSty">{{$t('user.Accelerate')}}</div>
        </div>
        <div class="farmnei-text3">
          <span>{{$t('user.canpromote')}}</span>
          <img @click="jump" src="../assets/common-icon-query.png" alt="">
        </div>
      </div>
    </div>
    <div class="bottom-btn disabledSty">{{$t('user.HarvestUnstake')}}</div>
  </div>
</template>

<script>
export default {
  name: 'farmNBIneiPage',
  data () {
    return {
      zhiNum:0
    }
  },
  props:['neiType'],
  methods:{
    jump(){
      this.$router.push('/rule');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .disabledSty{
    background-color:#535353!important;
  }
   @media only screen and (min-width: 0px) and (max-width: 639px){
    .farmnei{ 
      .top-img{
        margin-top: 110px;
        position: relative;
        img:nth-child(2){ 
          width: 43px;
          position: absolute;
          left: calc(50% + 21px);
          bottom: 15px; 
        }
      }
      .farm-text1{
        font-size: 30px;
        margin-top: 6px;
        margin-bottom: 30px;
      }
      .farm-text2{
        font-size: 24px;
        color: #F21922;
        margin-bottom: 80px;
      }
      .farmnei-flex{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        /* >div:nth-child(1){
          border: 3px solid #FEDE50;
        } */
        .flex-box{
          width: 300px;
          padding-bottom: 30px;
          box-sizing: border-box;
          border: 1px solid rgba(255, 255, 255, .3);
          border-radius: 40px;
          position: relative;
          margin-bottom: 30px;
          .right-img{
            position: absolute;
            right:27px;
            top: 24px;
            cursor: pointer;
            img{
              width: 40px;
            }
            div{
              font-size: 12px;
              color: #FEDE50;
            }
          }
          .img1{
            width: 60px;
            margin-top: 38px;
            margin-bottom: 16px;
          }
          .farmnei-text1{
            font-size: 48px;
            color: #FEDE50;
            margin-bottom: 15px;
          }
          .farmnei-text2{
            font-size: 14px;
            color: #FEDE50;
            margin-bottom: 25px;
          }
          .farmnei-btn{
            width: 240px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            background-color: #FEDE50;
            border-radius: 10px;
            font-size: 16px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
          }
          .farmnei-text3{
            width: 240px;
            margin: 0 auto;
            padding-top: 15px;
            font-size: 14px;
            cursor: pointer;
            span{
              margin-right: 2px;
            }
            img{
              width: 20px;
            }
          }
          .farmnei-input1{
            position: relative;
            width: 240px;
            height: 40px;
            background-color: #535353;
            border-radius: 10px;
            margin: 0 auto;
            font-size: 16px;
            span{
              position: absolute;
              right: 100px;
              top: 10px;
              color:rgba(255, 255, 255, .5);
            }
            input{
              display: inline-block;
              width: 100%;
              height: 100%;
              line-height: 37px;
              border: none;
              padding: 2px 15px;
              background-color: rgba(0,0,0,0);
              color:rgba(255, 255, 255, .5);
              font-weight: bold;
              outline: none;
            }
            div{
              position: absolute;
              right: 0px;
              top: 0px;
              width: 90px;
              height: 100%;
              line-height: 40px;
              background-color: #fff;
              border-radius: 10px;
              color: #000;
              cursor: pointer;
              font-weight: bold;
            }
          }
        }
      }
      .bottom-btn{
        width: 240px;
        height: 42px;
        line-height: 42px;
        margin: 50px auto;
        background-color: #F11822;
        border-radius: 10px;
        font-size: 16px;
        font-weight: bold;
      }
    }
   }
  @media only screen and (min-width: 639px){
    .farmnei{      
      >.ming-return{
        width: 90px;
        height: 30px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 10px;
        padding: 0px 15px;
        img{
          position: relative;
          top: 7px;
        }
        cursor: pointer;
      }
      .top-img{
        margin-top: 110px;
        position: relative;
        img:nth-child(2){ 
          width: 43px;
          position: absolute;
          left: calc(50% + 21px);
          bottom: 15px; 
        }
      }
      .farm-text1{
        font-size: 30px;
        margin-top: 6px;
        margin-bottom: 30px;
      }
      .farm-text2{
        font-size: 24px;
        color: #F21922;
        margin-bottom: 80px;
      }
      .farmnei-flex{
        display: flex;
        justify-content: space-around;
        /* >div:nth-child(1){
          border: 3px solid #FEDE50;
        } */
        .flex-box{
          width: 370px;
          height: 328px;
          box-sizing: border-box;
          border: 1px solid rgba(255, 255, 255, .3);
          border-radius: 40px;
          position: relative;
          .right-img{
            position: absolute;
            right:27px;
            top: 24px;
            cursor: pointer;
            img{
              width: 40px;
            }
            div{
              font-size: 12px;
              color: #FEDE50;
            }
          }
          .img1{
            width: 60px;
            margin-top: 38px;
            margin-bottom: 16px;
          }
          .farmnei-text1{
            font-size: 48px;
            color: #FEDE50;
            margin-bottom: 15px;
          }
          .farmnei-text2{
            font-size: 14px;
            color: #FEDE50;
            margin-bottom: 25px;
          }
          .farmnei-btn{
            width: 288px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            background-color: #FEDE50;
            border-radius: 10px;
            font-size: 16px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
          }
          .farmnei-text3{
            padding-top: 15px;
            font-size: 14px;
            cursor: pointer;
            span{
              margin-right: 2px;
            }
            img{
              width: 20px;
            }
          }
          .farmnei-input1{
            position: relative;
            width: 290px;
            height: 40px;
            background-color: #535353;
            border-radius: 10px;
            margin: 0 auto;
            font-size: 16px;
            span{
              position: absolute;
              right: 100px;
              top: 10px;
              color:rgba(255, 255, 255, .5);
            }
            input{
              display: inline-block;
              width: 100%;
              line-height: 37px;
              border: none;
              padding: 2px 15px;
              background-color: rgba(0,0,0,0);
              color:rgba(255, 255, 255, .5);
              font-weight: bold;
              outline: none;
            }
            div{
              position: absolute;
              right: 0px;
              top: 0px;
              width: 90px;
              height: 100%;
              line-height: 40px;
              background-color: #fff;
              border-radius: 10px;
              color: #000;
              cursor: pointer;
              font-weight: bold;
            }
          }
        }
      }
      .bottom-btn{
        width: 230px;
        height: 42px;
        line-height: 42px;
        margin: 78px auto;
        background-color: #F11822;
        border-radius: 10px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  
</style>
